<template>
  <!-- 商铺详情中的商品详情组件 -->
  <div>
    <div v-for="(val, i) in arr" :key="val.item_id">
      <van-card
        :desc="val.description"
        :title="val && val.name"
        :thumb="'//elm.cangdu.org/img/' + val.image_path"
        @click-thumb="ongoodproduct(val.restaurant_id, i)"
      >
        <template #tags>
          <div>
            <span>月售{{ val.month_sales }}份</span>
            <span>好评率{{ val.satisfy_rate }}%</span>
          </div>
          <span v-show="val.activity && val.activity.image_text"
            ><van-tag plain round type="danger">{{
              val.activity && val.activity.image_text
            }}</van-tag></span
          >
        </template>
        <template #bottom>
          <div>
            <i>￥</i><span>{{ val.specfoods[0].price }}</span>
          </div>
          <!-- 加入商品 -->
          <div v-if="val.specifications.length == 0">
            <span
              v-show="
                (buyCart[val.specfoods[0].restaurant_id]
                  ? buyCart[val.specfoods[0].restaurant_id][val.category_id]
                    ? buyCart[val.specfoods[0].restaurant_id][val.category_id][
                        val.item_id
                      ]
                      ? buyCart[val.specfoods[0].restaurant_id][
                          val.category_id
                        ][val.item_id][val.specfoods[0].food_id]
                        ? buyCart[val.specfoods[0].restaurant_id][
                            val.category_id
                          ][val.item_id][val.specfoods[0].food_id].num
                        : 0
                      : 0
                    : 0
                  : 0) != 0
              "
            >
              <em class="iconfont icon-jjian-" @click="delgoods(i)"></em>
              <span class="num" ref="num">
                {{
                  buyCart[val.specfoods[0].restaurant_id]
                    ? buyCart[val.specfoods[0].restaurant_id][val.category_id]
                      ? buyCart[val.specfoods[0].restaurant_id][
                          val.category_id
                        ][val.item_id]
                        ? buyCart[val.specfoods[0].restaurant_id][
                            val.category_id
                          ][val.item_id][val.specfoods[0].food_id]
                          ? buyCart[val.specfoods[0].restaurant_id][
                              val.category_id
                            ][val.item_id][val.specfoods[0].food_id].num
                          : 0
                        : 0
                      : 0
                    : 0
                }}
              </span>
            </span>

            <em class="iconfont icon-jia" @click="addgoods(i, indexgg)"></em>
          </div>
          <div v-if="val.specifications.length > 0">
            <span>
              <span
                v-show="
                  (buyCart[val.specfoods[0].restaurant_id]
                    ? buyCart[val.specfoods[0].restaurant_id][val.category_id]
                      ? buyCart[val.specfoods[0].restaurant_id][
                          val.category_id
                        ][val.item_id]
                        ? buyCart[val.specfoods[0].restaurant_id][
                            val.category_id
                          ][val.item_id].nums
                        : 0
                      : 0
                    : 0) != 0
                "
              >
                <em
                  class="iconfont icon-jjian-"
                  @click="$toast('多规格商品只能去购物车删除哦')"
                ></em>
                <span class="num">
                  {{
                    buyCart[val.specfoods[0].restaurant_id]
                      ? buyCart[val.specfoods[0].restaurant_id][val.category_id]
                        ? buyCart[val.specfoods[0].restaurant_id][
                            val.category_id
                          ][val.item_id]
                          ? buyCart[val.specfoods[0].restaurant_id][
                              val.category_id
                            ][val.item_id].nums
                          : 0
                        : 0
                      : 0
                  }}
                </span>
              </span>
              <span @click="specification(i)"
                ><van-tag type="primary" size="medium">选规格</van-tag></span
              ></span
            >
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buyCart: JSON.parse(localStorage.getItem("buyCart")) || {},
      restaurant_id: "",
      food_id: "",
      category_id: "",
      item_id: "",
      bool: false, //为了清空
    };
  },

  props: ["arr", "indexgg", "index"], //所有商品数组,商品规格索引,商品分类索引
  methods: {
    addgoods(i, indexgg) {
      this.buyCart = JSON.parse(localStorage.getItem("buyCart"));
      this.restaurant_id = this.arr[i].restaurant_id;
      this.food_id =
        this.arr[i].specfoods[indexgg] &&
        this.arr[i].specfoods[indexgg].food_id;
      this.category_id = this.arr[i].category_id;
      this.item_id = this.arr[i].item_id;
      if (!this.buyCart[this.restaurant_id] || this.bool) {
        this.$set(this.buyCart, this.restaurant_id, {});
      }
      if (!this.buyCart[this.restaurant_id][this.category_id] || this.bool) {
        this.$set(this.buyCart[this.restaurant_id], this.category_id, {});
      }
      if (
        !this.buyCart[this.restaurant_id][this.category_id][this.item_id] ||
        this.bool
      ) {
        this.$set(
          this.buyCart[this.restaurant_id][this.category_id],
          this.item_id,
          {}
        );
      }
      if (
        !this.buyCart[this.restaurant_id][this.category_id][this.item_id][
          this.food_id
        ] ||
        this.bool
      ) {
        this.$set(
          this.buyCart[this.restaurant_id][this.category_id][this.item_id],
          this.food_id,
          this.arr[i].specfoods[indexgg]
        );
      }
      if (
        !this.buyCart[this.restaurant_id][this.category_id][this.item_id][
          this.food_id
        ].num ||
        this.bool
      ) {
        this.$set(
          this.buyCart[this.restaurant_id][this.category_id][this.item_id][
            this.food_id
          ],
          "num",
          0
        );
      }
      this.buyCart[this.restaurant_id][this.category_id][this.item_id][
        this.food_id
      ].num += 1;
      // 把每个商品的商品分类ID存入本地
      if (
        !this.buyCart[this.restaurant_id][this.category_id][this.item_id][
          this.food_id
        ].category_id ||
        this.bool
      ) {
        this.$set(
          this.buyCart[this.restaurant_id][this.category_id][this.item_id][
            this.food_id
          ],
          "category_id",
          this.category_id
        );
      }
      // 每个商品的下单数量
      if (
        !this.buyCart[this.restaurant_id][this.category_id][this.item_id]
          .nums ||
        this.bool
      ) {
        this.$set(
          this.buyCart[this.restaurant_id][this.category_id][this.item_id],
          "nums",
          0
        );
      }
      let nums = 0;
      for (const key in this.buyCart[this.restaurant_id][this.category_id][
        this.item_id
      ]) {
        if (
          this.buyCart[this.restaurant_id][this.category_id][this.item_id][key]
            .num
        ) {
          nums +=
            this.buyCart[this.restaurant_id][this.category_id][this.item_id][
              key
            ].num;
        }
      }
      this.buyCart[this.restaurant_id][this.category_id][this.item_id].nums =
        nums;
      // 每个商品分类上的气泡总和
      if (
        !this.buyCart[this.restaurant_id][this.category_id].sum ||
        this.bool
      ) {
        this.$set(this.buyCart[this.restaurant_id][this.category_id], "sum", 0);
      }
      let sum = 0;
      for (const key in this.buyCart[this.restaurant_id][this.category_id]) {
        if (this.buyCart[this.restaurant_id][this.category_id][key].nums) {
          sum += this.buyCart[this.restaurant_id][this.category_id][key].nums;
        }
      }
      this.buyCart[this.restaurant_id][this.category_id].sum = sum;
      // 每个商铺加入购物车的总和(即购物车上的气泡数字)
      if (!this.buyCart[this.restaurant_id].shopingsum || this.bool) {
        this.$set(this.buyCart[this.restaurant_id], "shopingsum", 0);
      }
      let shopingsum = 0;
      for (const key in this.buyCart[this.restaurant_id]) {
        if (this.buyCart[this.restaurant_id][key].sum) {
          shopingsum += this.buyCart[this.restaurant_id][key].sum;
        }
      }
      this.buyCart[this.restaurant_id].shopingsum = shopingsum;
      this.$emit("addgoods", this.buyCart);
      this.bool = false;
      localStorage.setItem("buyCart", JSON.stringify(this.buyCart));
    },
    delgoods(i) {
      this.restaurant_id =
        this.arr[i].specfoods[0] && this.arr[i].specfoods[0].restaurant_id;
      this.food_id =
        this.arr[i].specfoods[0] && this.arr[i].specfoods[0].food_id;
      this.category_id = this.arr[i].category_id;
      this.item_id = this.arr[i].item_id;
      if (
        this.buyCart[this.restaurant_id][this.category_id][this.item_id][
          this.food_id
        ].num >= 1
      ) {
        this.buyCart[this.restaurant_id][this.category_id][this.item_id][
          this.food_id
        ].num -= 1;
      }
      let nums = 0;
      for (const key in this.buyCart[this.restaurant_id][this.category_id][
        this.item_id
      ]) {
        if (
          this.buyCart[this.restaurant_id][this.category_id][this.item_id][key]
            .num
        ) {
          nums +=
            this.buyCart[this.restaurant_id][this.category_id][this.item_id][
              key
            ].num;
        }
      }
      this.buyCart[this.restaurant_id][this.category_id][this.item_id].nums =
        nums;
      let sum = 0;
      for (const key in this.buyCart[this.restaurant_id][this.category_id]) {
        if (this.buyCart[this.restaurant_id][this.category_id][key].nums) {
          sum += this.buyCart[this.restaurant_id][this.category_id][key].nums;
        }
      }
      this.buyCart[this.restaurant_id][this.category_id].sum = sum;
      this.$emit("delgoods", this.buyCart);
      let shopingsum = 0;
      for (const key in this.buyCart[this.restaurant_id]) {
        if (this.buyCart[this.restaurant_id][key].sum) {
          shopingsum += this.buyCart[this.restaurant_id][key].sum;
        }
      }
      this.buyCart[this.restaurant_id].shopingsum = shopingsum;
      this.$emit("addgoods", this.buyCart);
    },
    // 选规格弹出框
    specification(i) {
      this.$emit("specification", i);
    },
    // 跳转商品详情
    ongoodproduct(restaurant_id, i) {
      this.$router.push({
        path: "/goodproduct",
        query: {
          restaurant_id, //商品ID
          index: this.index, //商品分类下标
          i, //商品下标
        },
      });
    },
    // 为了父路由那边能清空这里的buyCart
    empty(shopid) {
      this.buyCart[shopid] = {};
      this.bool = true;
    },
  },
  watch: {
    buyCart: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        console.log(92, newVal);
        localStorage.setItem("buyCart", JSON.stringify(this.buyCart));
      },
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-card {
  font-size: 12px;
  color: #333;
  .van-card__title {
    font-size: 16px;
    font-weight: 600;
  }
  .van-card__desc {
    color: #999;
    margin: 3px 0;
  }
  .van-tag--plain {
    margin: 3px 0;
  }
  .van-card__bottom {
    display: flex;
    justify-content: space-between;
    color: red;
    line-height: 26px;
    span {
      font-size: 16px;
      font-weight: 600;
    }
    .icon-jjian-,
    .icon-jia {
      font-size: 16px;
      color: #3190e8;
    }
    .num {
      color: #666;
      font-weight: 400;
    }
  }
}
</style>